<template>
<div class="mod">
	<div class="mod_title floatClear">
		/&nbsp;{{title}}&nbsp;/
		<ul class="mod_more floatRight">
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="industry inco" v-show="industry.type">
		<em>行业</em>
		<ul class="inco_list">
			<li class="inco_item" v-for="(item,index) in industry.list"><a href="javascript:;"  :class="index==industry_index?'inco_link_action inco_link':'inco_link'" @click="industryChange(index)">{{item}}</a></li>
		</ul>
	</div>
	<div class="cost inco" v-show="cost.type">
		<em>类别</em>
		<ul class="inco_list">
			<li class="inco_item" v-for="(item,index) in cost.list"><a href="javascript:;"  :class="index==cost_index?'inco_link_action inco_link':'inco_link'" @click="costChange(index)">{{item}}</a></li>
		</ul>
	</div>

	<div class="mod_content">
		<ul class="mod_content_list">
			<li class="mod_content_item" v-for="item in list">
				<div class="mod_content_item_wrap" >
					<img class="wrap_img" :src="item.imgSrc">
					<p class="wrap_title">{{item.title}}</p>
					<p class="wrap_cost" >{{item.cost}}</p>
				</div>
			</li>
		</ul>

		
	</div>


</div>
</template>

<script>
export default {
	name:'mod',
	data(){
		return {
			industry_index:0,
			cost_index:0,
			//数据应该传进来，不应该写在这里，偷懒一下
			list:[
				{
					imgSrc:require('../../assets/images/1.jpg'),
					title:'Web前端开发之JavaScript精英课堂【渡一教育】',
					cost:'免费'
				},{
					imgSrc:require('../../assets/images/2.jpg'),
					title:'野生前端程序员的自我修养',
					cost:'免费'
				},{
					imgSrc:require('../../assets/images/3.jpg'),
					title:'Web前端开发高级工程师就业班【渡一教育】',
					cost:'¥4499.00'
				},{
					imgSrc:require('../../assets/images/4.jpg'),
					title:'【腾讯IMWeb团队出品】Web前端工程师NEXT学位完整课程',
					cost:'¥8888.00'
				},{
					imgSrc:require('../../assets/images/5.jpg'),
					title:'Web前端开发之HTML+CSS精英课堂【渡一教育】',
					cost:'免费'
				}

			]
		}
	},
	props:{
		cost:{
			type:Object
		},
		industry:{
			type:Object
		},
		title:{
			type:String
		},
		content:{
			type:Array
		}
	},
	methods:{
		
		industryChange(index){
			this.$data.industry_index = index;
			console.log(this.title)
			console.log("行业:", this.industry_index)
			console.log("类别:", this.cost_index)
		},
		costChange(index){
			this.$data.cost_index = index;
			console.log(this.title)
			console.log("行业:", this.industry_index)
			console.log("类别:", this.cost_index)
		}
		
	}
}
</script>

<style scoped>

.mod_title{
	text-align:center;
	color:#777;
	font-size:0.4rem;
	line-height:60px;
	position: relative;
}
.mod_more{
	position: absolute;
	top:0;
	right:20px;
	height: 100%;
	font-size: 0;
	cursor:pointer;
}
.mod_more li{
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right:4px;
	cursor:pointer;
}
.mod_more li:nth-child(1){
	background-color: #cacaca;
}
.mod_more li:nth-child(2){
	background-color: #7e7e7e;
}
.mod_more li:nth-child(3){
	background-color: #0c0c0c;
}
/*-----------------------------------------------*/
.inco{
	width: 9.6rem;
	margin:0 auto;
	color:#777;
	line-height:50px;
	font-size:0.36rem;
	display: flex;
	word-break:keep-all;       /* 不换行 */
	white-space:nowrap;        /* 不换行 */
}
.inco em{
	font-style: normal;
	margin-right:20px;
}
.inco_list{
	word-break:keep-all;       /* 不换行 */
	white-space:nowrap;        /* 不换行 */
	overflow-x:auto;
}
.inco_list::-webkit-scrollbar{
  display:none;
}
.inco_item{
	display:inline-block;
	margin-right:30px;

}
.inco_link{
	color:#777;
	font-size:0.36rem;
}
.inco_link_action{
	color:#000;
	font-weight:bold;
	font-size:0.38rem;
	position:relative;
}
.inco_link_action:after{
	content:"";
	display: block;
	width: 4px;
	height: 4px;
	border-radius:50%;
	background-color: #23b8ff;
	position: absolute;
	bottom:-6px;
	left:50%;
}
/*-----------------------------------------------*/
.mod_content{
	margin:10px 0;
}
.mod_content_list{
	width: 9.6rem;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.mod_content_item{
	width: 49%;
	margin-bottom:0.2rem;
}
.mod_content_item_wrap .wrap_img{
	width: 100%;
	border-radius:10px;
}
.mod_content_item_wrap .wrap_title{
	font-size: 0.4rem;
	width: 100%;

	text-overflow:ellipsis;		/* 超出部分用省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;

	overflow: hidden;
	height:0.8rem;
	line-height:1;
}
.mod_content_item_wrap .wrap_cost{
	color: #23b8ff;
	font-size:0.36rem;
}

</style>